<template>
  <div class="al-layout" :style="pageStyle" id="visualizationPageRoot" data-page-name="1">
    <al-line-chart
      v-show="showState.vid_sg4nh39hxx_visible"
      data-vid="vid_sg4nh39hxx"
      ref="vid_sg4nh39hxx_ref"
      class="vid_sg4nh39hxx"
      :valueFormatter="valueFormatMap.vid_sg4nh39hxx"
      :chartType="blockPropState['vid_sg4nh39hxx_props']['chartType']"
      :lineWidth="blockPropState['vid_sg4nh39hxx_props']['lineWidth']"
      :chartColor="blockPropState['vid_sg4nh39hxx_props']['chartColor']"
      :gridOptions="blockPropState['vid_sg4nh39hxx_props']['gridOptions']"
      :labelShow="blockPropState['vid_sg4nh39hxx_props']['labelShow']"
      :labelPosition="blockPropState['vid_sg4nh39hxx_props']['labelPosition']"
      :labelFontFamily="blockPropState['vid_sg4nh39hxx_props']['labelFontFamily']"
      :labelFontStyle="blockPropState['vid_sg4nh39hxx_props']['labelFontStyle']"
      :labelFontSize="blockPropState['vid_sg4nh39hxx_props']['labelFontSize']"
      :labelColor="blockPropState['vid_sg4nh39hxx_props']['labelColor']"
      :chartLabelType="blockPropState['vid_sg4nh39hxx_props']['chartLabelType']"
      :labelOffsetX="blockPropState['vid_sg4nh39hxx_props']['labelOffsetX']"
      :labelOffsetY="blockPropState['vid_sg4nh39hxx_props']['labelOffsetY']"
      :showMarkLine="blockPropState['vid_sg4nh39hxx_props']['showMarkLine']"
      :markLineName="blockPropState['vid_sg4nh39hxx_props']['markLineName']"
      :markLineType="blockPropState['vid_sg4nh39hxx_props']['markLineType']"
      :markLineLabelFormatter="blockPropState['vid_sg4nh39hxx_props']['markLineLabelFormatter']"
      :markLineColor="blockPropState['vid_sg4nh39hxx_props']['markLineColor']"
      :markLineWidth="blockPropState['vid_sg4nh39hxx_props']['markLineWidth']"
      :markLineLabelFontSize="blockPropState['vid_sg4nh39hxx_props']['markLineLabelFontSize']"
      :legendShow="blockPropState['vid_sg4nh39hxx_props']['legendShow']"
      :legendPosition="blockPropState['vid_sg4nh39hxx_props']['legendPosition']"
      :legendType="blockPropState['vid_sg4nh39hxx_props']['legendType']"
      :legendAlign="blockPropState['vid_sg4nh39hxx_props']['legendAlign']"
      :customIcon="blockPropState['vid_sg4nh39hxx_props']['customIcon']"
      :legendIcon="blockPropState['vid_sg4nh39hxx_props']['legendIcon']"
      :legendItemHeight="blockPropState['vid_sg4nh39hxx_props']['legendItemHeight']"
      :legendFontSize="blockPropState['vid_sg4nh39hxx_props']['legendFontSize']"
      :legendColor="blockPropState['vid_sg4nh39hxx_props']['legendColor']"
      :xAxisName="blockPropState['vid_sg4nh39hxx_props']['xAxisName']"
      :xAxisNameFontFamily="blockPropState['vid_sg4nh39hxx_props']['xAxisNameFontFamily']"
      :xAxisNameStyle="blockPropState['vid_sg4nh39hxx_props']['xAxisNameStyle']"
      :xAxisNameFontSize="blockPropState['vid_sg4nh39hxx_props']['xAxisNameFontSize']"
      :xAxisNameFontColor="blockPropState['vid_sg4nh39hxx_props']['xAxisNameFontColor']"
      :xAxisTick="blockPropState['vid_sg4nh39hxx_props']['xAxisTick']"
      :xAxisLabelShow="blockPropState['vid_sg4nh39hxx_props']['xAxisLabelShow']"
      :xAxisLabelRotate="blockPropState['vid_sg4nh39hxx_props']['xAxisLabelRotate']"
      :xAxisLabelFontFamily="blockPropState['vid_sg4nh39hxx_props']['xAxisLabelFontFamily']"
      :xAxisLabelFontStyle="blockPropState['vid_sg4nh39hxx_props']['xAxisLabelFontStyle']"
      :xAxisLabelFontSize="blockPropState['vid_sg4nh39hxx_props']['xAxisLabelFontSize']"
      :xAxisLabelColor="blockPropState['vid_sg4nh39hxx_props']['xAxisLabelColor']"
      :xAxisLineShow="blockPropState['vid_sg4nh39hxx_props']['xAxisLineShow']"
      :xAxisLineType="blockPropState['vid_sg4nh39hxx_props']['xAxisLineType']"
      :xAxisLineWidth="blockPropState['vid_sg4nh39hxx_props']['xAxisLineWidth']"
      :xAxisLineColor="blockPropState['vid_sg4nh39hxx_props']['xAxisLineColor']"
      :xSplitLineShow="blockPropState['vid_sg4nh39hxx_props']['xSplitLineShow']"
      :xSplitLineType="blockPropState['vid_sg4nh39hxx_props']['xSplitLineType']"
      :xSplitLineWith="blockPropState['vid_sg4nh39hxx_props']['xSplitLineWith']"
      :xSplitLineColor="blockPropState['vid_sg4nh39hxx_props']['xSplitLineColor']"
      :xAxisDataZoom="blockPropState['vid_sg4nh39hxx_props']['xAxisDataZoom']"
      :xAxisDataZoomStart="blockPropState['vid_sg4nh39hxx_props']['xAxisDataZoomStart']"
      :xAxisDataZoomEnd="blockPropState['vid_sg4nh39hxx_props']['xAxisDataZoomEnd']"
      :xAxisDataZoomHeight="blockPropState['vid_sg4nh39hxx_props']['xAxisDataZoomHeight']"
      :xAxisDataZoomShowDetail="blockPropState['vid_sg4nh39hxx_props']['xAxisDataZoomShowDetail']"
      :yAxisName="blockPropState['vid_sg4nh39hxx_props']['yAxisName']"
      :yAxisNameFontFamily="blockPropState['vid_sg4nh39hxx_props']['yAxisNameFontFamily']"
      :yAxisNameStyle="blockPropState['vid_sg4nh39hxx_props']['yAxisNameStyle']"
      :yAxisNameFontSize="blockPropState['vid_sg4nh39hxx_props']['yAxisNameFontSize']"
      :yAxisNameFontColor="blockPropState['vid_sg4nh39hxx_props']['yAxisNameFontColor']"
      :yAxisTick="blockPropState['vid_sg4nh39hxx_props']['yAxisTick']"
      :yAxisLabelShow="blockPropState['vid_sg4nh39hxx_props']['yAxisLabelShow']"
      :customTickLeft="blockPropState['vid_sg4nh39hxx_props']['customTickLeft']"
      :yAxisLabelFontFamily="blockPropState['vid_sg4nh39hxx_props']['yAxisLabelFontFamily']"
      :yAxisLabelFontStyle="blockPropState['vid_sg4nh39hxx_props']['yAxisLabelFontStyle']"
      :yAxisLabelFontSize="blockPropState['vid_sg4nh39hxx_props']['yAxisLabelFontSize']"
      :yAxisLabelColor="blockPropState['vid_sg4nh39hxx_props']['yAxisLabelColor']"
      :yAxisLineShow="blockPropState['vid_sg4nh39hxx_props']['yAxisLineShow']"
      :yAxisLineType="blockPropState['vid_sg4nh39hxx_props']['yAxisLineType']"
      :yAxisLineWith="blockPropState['vid_sg4nh39hxx_props']['yAxisLineWith']"
      :yAxisLineColor="blockPropState['vid_sg4nh39hxx_props']['yAxisLineColor']"
      :ySplitLineShow="blockPropState['vid_sg4nh39hxx_props']['ySplitLineShow']"
      :ySplitLineType="blockPropState['vid_sg4nh39hxx_props']['ySplitLineType']"
      :ySplitLineWith="blockPropState['vid_sg4nh39hxx_props']['ySplitLineWith']"
      :ySplitLineColor="blockPropState['vid_sg4nh39hxx_props']['ySplitLineColor']"
      :yAxisDataZoom="blockPropState['vid_sg4nh39hxx_props']['yAxisDataZoom']"
      :yAxisDataZoomStart="blockPropState['vid_sg4nh39hxx_props']['yAxisDataZoomStart']"
      :yAxisDataZoomEnd="blockPropState['vid_sg4nh39hxx_props']['yAxisDataZoomEnd']"
      :yAxisDataZoomHeight="blockPropState['vid_sg4nh39hxx_props']['yAxisDataZoomHeight']"
      :yAxisDataZoomShowDetail="blockPropState['vid_sg4nh39hxx_props']['yAxisDataZoomShowDetail']"
      :yAxisMinShow="blockPropState['vid_sg4nh39hxx_props']['yAxisMinShow']"
      :yAxisMin="blockPropState['vid_sg4nh39hxx_props']['yAxisMin']"
      :conditionFormat="blockPropState['vid_sg4nh39hxx_props']['conditionFormat']"
      :dataSets="blockPropState['vid_sg4nh39hxx_props']['dataSets']"
      :showLinkage="blockPropState['vid_sg4nh39hxx_props']['showLinkage']"
    >
    </al-line-chart>
  </div>
</template>
<script setup>


  import { ref, onMounted,onActivated, onBeforeUnmount, reactive, watch, computed, nextTick } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { post } from '@/utils/http/Axios';
  import dayjs from 'dayjs';
  import { collectComponentLinkage, $each, getPosition, collectComponentJump, $getCirculationKey, $guid, isArray, setPageTitle, getAssetsFile } from '@/utils/index';
  import { generateFetchParams, $urlParse } from '@/utils/fetchParams/index';
  import { html2png } from '@allin-components/allin-utils';
  import { getConditions }  from '@/utils/textFilterChange';
  import { generateFieldMap } from '@/utils/generateFieldMap';
  import * as formatModule from '@/utils/formatData/index';
  import { clickChartHandleDrillData, triggerHandleDrillUp, commonGetMapChartJSON } from '@/utils/drillHandle/index';
  import { handleDealDataFormat, generateComponentFieldFormatMap } from "@/utils/useFormatter";
  import useSyncToken from '@/hooks/useSyncToken'
  // import { AllinLoading } from "allin-taishan-component";
  const router = useRouter();
  const route = useRoute();

  const authInfo = JSON.parse(localStorage.getItem('app-user') ?? "{}")
  const sendToken = useSyncToken(authInfo.token, authInfo.uuid)


  // ---------------------------- 属性 --------------------------
  // 全局变量，用来提供给定制化逻辑使用（目前作用是被iframe嵌套，url接收全局参数的问题）
  const externalParams = reactive({});
  const blockPropState = reactive({});


  // 页码信息
  const pageInfoMap = reactive({});
  //文本筛选器选中的值
  const filterValue = reactive({});
  //条件信息
  const conditionMap = reactive({});
  //事件信息
  const eventInfoMap = reactive({});
  // 表格触发事件
  const tableTriggerMap = reactive({});
  // valueFormat
  const valueFormatMap = reactive({});
  // 组件信息
  const blockInfoMap = reactive({});
  // 需要存储下被联动的信息,比如表格切换分页时
  const linkageEdInfoMap = reactive({});
      eventInfoMap.vid_sg4nh39hxx = reactive(
        {}
      )
  linkageEdInfoMap.vid_sg4nh39hxx = reactive({})

  blockPropState['vid_sg4nh39hxx_props'] = reactive({
        showLinkage: false,
      chartType: {"areaStyle":{"opacity":0.6},"smooth":false},
      lineWidth: 1,
      chartColor: ["#5B8FF9","#61DDAA","#758FBE","#FEDA5F","#8F82FF","#78D3F8","#B574E3","#FE9E7F"],
      gridOptions: {"left":{"value":5,"unit":"%","valueUnit":"5%"},"top":{"value":5,"unit":"%","valueUnit":"5%"},"bottom":{"value":5,"unit":"%","valueUnit":"5%"},"right":{"value":5,"unit":"%","valueUnit":"5%"}},
      labelShow: {"label":{"show":false}},
      labelPosition: {"label":{"position":"top"}},
      labelFontFamily: "arial, helvetica, 'microsoft yahei'",
      labelFontStyle: {"label":{"fontStyle":"normal","fontWeight":"normal"}},
      labelFontSize: 14,
      labelColor: "#FFF",
      chartLabelType: {"label":{"formatter":"{c}"}},
      labelOffsetX: 0,
      labelOffsetY: 0,
      showMarkLine: false,
      markLineName: undefined,
      markLineType: {"valueType":"fixed","dataType":"average","fixedValue":null,"metricName":""},
      markLineLabelFormatter: [],
      markLineColor: "rgba(76,175,80,1)",
      markLineWidth: 1,
      markLineLabelFontSize: 14,
      legendShow: false,
      legendPosition: {"top":"top","left":"left","orient":"horizontal"},
      legendType: "plain",
      legendAlign: "left",
      customIcon: false,
      legendIcon: "circle",
      legendItemHeight: 10,
      legendFontSize: 14,
      legendColor: "#fff",
      xAxisName: undefined,
      xAxisNameFontFamily: "arial, helvetica, 'microsoft yahei'",
      xAxisNameStyle: {"fontStyle":"normal","fontWeight":"normal","fontFamily":"arial, helvetica, 'microsoft yahei'","fontSize":14,"color":"#FFF"},
      xAxisNameFontSize: 14,
      xAxisNameFontColor: "#FFF",
      xAxisTick: true,
      xAxisLabelShow: true,
      xAxisLabelRotate: 0,
      xAxisLabelFontFamily: "arial, helvetica, 'microsoft yahei'",
      xAxisLabelFontStyle: {"fontStyle":"normal","fontWeight":"normal","show":true,"rotate":0,"fontFamily":"arial, helvetica, 'microsoft yahei'","fontSize":14,"color":"#FFF"},
      xAxisLabelFontSize: 14,
      xAxisLabelColor: "#FFF",
      xAxisLineShow: true,
      xAxisLineType: "solid",
      xAxisLineWidth: "1",
      xAxisLineColor: "#FFF",
      xSplitLineShow: true,
      xSplitLineType: "solid",
      xSplitLineWith: "1",
      xSplitLineColor: "#FFF",
      xAxisDataZoom: false,
      xAxisDataZoomStart: 0,
      xAxisDataZoomEnd: 100,
      xAxisDataZoomHeight: 1,
      xAxisDataZoomShowDetail: true,
      yAxisName: undefined,
      yAxisNameFontFamily: "arial, helvetica, 'microsoft yahei'",
      yAxisNameStyle: {"fontStyle":"normal","fontWeight":"normal","fontFamily":"arial, helvetica, 'microsoft yahei'","fontSize":14,"color":"#FFF"},
      yAxisNameFontSize: 14,
      yAxisNameFontColor: "#FFF",
      yAxisTick: false,
      yAxisLabelShow: true,
      customTickLeft: {"min":null,"max":null},
      yAxisLabelFontFamily: "arial, helvetica, 'microsoft yahei'",
      yAxisLabelFontStyle: {"fontStyle":"normal","fontWeight":"normal","show":true,"fontFamily":"arial, helvetica, 'microsoft yahei'","fontSize":14,"color":"#FFF"},
      yAxisLabelFontSize: 14,
      yAxisLabelColor: "#FFF",
      yAxisLineShow: true,
      yAxisLineType: "solid",
      yAxisLineWith: "1",
      yAxisLineColor: "#FFF",
      ySplitLineShow: true,
      ySplitLineType: "solid",
      ySplitLineWith: "1",
      ySplitLineColor: "#FFF",
      yAxisDataZoom: false,
      yAxisDataZoomStart: 0,
      yAxisDataZoomEnd: 100,
      yAxisDataZoomHeight: 1,
      yAxisDataZoomShowDetail: true,
      yAxisMinShow: false,
      yAxisMin: 0,
      conditionFormat: {},
      dataSets: {"dimensions":{"xAxis":"x","yAxis":"y","legend":"name"},"source":[{"x":"1","y":22,"name":"生产"},{"x":"2","y":25,"name":"生产"},{"x":"3","y":30,"name":"生产"},{"x":"4","y":27,"name":"生产"},{"x":"5","y":31,"name":"生产"},{"x":"6","y":35,"name":"生产"},{"x":"1","y":18,"name":"销售"},{"x":"2","y":20,"name":"销售"},{"x":"3","y":23,"name":"销售"},{"x":"4","y":18,"name":"销售"},{"x":"5","y":25,"name":"销售"},{"x":"6","y":21,"name":"销售"}],"geographyTypes":{},"type":"STATIC","fieldNameChainMap":{"xAxis":{},"yAxis":{},"legend":{}},"collectdataSetType":{},"conditionData":{},"conditionOptions":{},"sourceMap":{},"moduleName":"bi","seriesData":[{"dataFormatType":"yAxis","name":"生产","data":[{"value":22},{"value":25},{"value":30},{"value":27},{"value":31},{"value":35}]},{"dataFormatType":"yAxis","name":"销售","data":[{"value":18},{"value":20},{"value":23},{"value":18},{"value":25},{"value":21}]}],"xAxisData":[{"value":"1","values":["1"]},{"value":"2","values":["2"]},{"value":"3","values":["3"]},{"value":"4","values":["4"]},{"value":"5","values":["5"]},{"value":"6","values":["6"]}]}
  })


  valueFormatMap['vid_sg4nh39hxx'] = reactive({});

  // ---------------------------- 元素数据引用 ----------------------------
  const iframeIdList = ref([]);
  const loading = ref(true);
  const dataConnector_state = reactive({});
  // 联动状态
  const linkageComponentsMap = {};
  // 组件的format
  const formatStrategy = {};
  let maskZIndex = 999;
  const intervalMap = {};
  // 下钻的面包屑
  const drillBreadcrumbsPreview = ref([]);
      // 存放组件引用集合
  const allRefMap = reactive({});
  // 组件 基础折线图 的引用
  const vid_sg4nh39hxx_ref = ref(null);
  allRefMap['vid_sg4nh39hxx'] = vid_sg4nh39hxx_ref;
      // 组件显示隐藏状态
      const showState = reactive({
        // 组件 基础折线图 的显隐状态
      vid_sg4nh39hxx_visible: true,

  })



      // 页面配置中的全局参数
      const pageGlobalParameters = reactive([]);
      // ------------------------------------------------------ 生命周期

  onMounted(() => {


    window.addEventListener('resize', scaleScreen);
    init();
    // 处理iframe传参
    if (iframeIdList.value.length) {
      iframeIdList.value.forEach(item => {
      const iframeBox = `#${item} iframe`
        const iframe = document.querySelector(iframeBox);
        // 判断输入的地址中是否有参数
        const hrefParams = $urlParse(window.top.location.href);
        let src = decodeURIComponent(iframe.src);
        const newSrc = new URL(src);
        for( let [key, value] of newSrc.searchParams) {
          if(/^\${.*}$/.test(value)) {
            // 获取到要绑定的动态参数名
            const [, bindKey] = value.match(/(?:\$\{)([\w\d]+)/)
            newSrc.searchParams.set(key, hrefParams[bindKey])
          }
        }
        iframe.src = newSrc.href;
        iframe.onload = ()=>{
          // iframe加载完毕以后执行操作
          iframe.contentWindow?.postMessage({
            authInfo
        }, '*')
        }
      })
    }
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', scaleScreen);
  })

      // ------------------------------------------------------ 监听

      // ------------------------------------------------------ 方法
      function init() {
        loading.value = false;
        scaleScreen()
      }
      function getPopupContainer() {
        return document.documentElement;
      }
      // 数据请求

    // 记录对表格联动的状态
    function recordLinkageStatus(data) {
      const { id, linkageList } = data;
      if (linkageEdInfoMap[id]) {
        linkageEdInfoMap[id].linkageList = linkageList;
      }
    }
    // 接入外部数据处理
    function dealExternalData(data) {
      const { result, extendInfo } = data;
      const resultParams = [];
      result.forEach((field) => {
        for(let key in field) {
          let info = [];
          if (!isArray(field[key].value)) {
            info.push(field[key].value)
          } else {
            info = field[key].value;
          }
          info.forEach((keyValue, index) => {
            if (index > resultParams.length - 1) {
               resultParams.push({
                  [key]: keyValue
               });
            } else {
              resultParams[index][key] = keyValue;
            }
          })
        }
      })
      if (extendInfo.api) {
        return new Promise((resolve, reject) => {
          post(extendInfo.api, resultParams).then(async (res) => {
            if (res.data) {
              const obj = {}
              res.data.forEach((data) => {
                 extendInfo.fields.forEach((key) => {
                    if (!obj[key]) {
                      obj[key] = [data[key]];
                    } else {
                      obj[key].push(data[key])
                    }
                 })
              })
              resolve(obj);
            }
          })
        })
      }
    }
    // 组件请求数据参数处理函数
    let requestParamHandle = {}
    // 组件请求结果预处理函数
    let requestResponsePreHandle = {}
    // 组件请求结果处理函数
    let requestResponsePostHandle = {}
    // 通用请求方法
    let commonRequestData = async function (extraInfo) {
      const {
        relation_block,
        linkageList = [],
        id,
        drillBreadcrumbs = [],
        drillType = 'down',
        params: upParams,
        pageGlobalParameters,
        pageInfo = {},
        extendParams = {}
      } = extraInfo;
      if (!relation_block) {
        return;
      }
      const { relationData, componentKey, geoMap =[] } = relation_block;
      const options = {
        linkageList,
        componentKey, // 组件名字
        relationData, // 数据配置信息
        relationOptionIndex: '0', // 多图层，初始化，暂定默认都是0
        released: true, // 全量数据
        drillList: relationData?.drillInfo?.list || [],
        drillBreadcrumbs,
        pageGlobalParameters,
        pagination: pageInfo,
        externalParams,
        geoMap,
        // 低代码下分析应用需加上标识
         schema: document.domain.startsWith('asa') ? 'low_code_application' : '',
      };
      let result = await generateFetchParams(id, options);
      if (!result) {
        return;
      }
      try{
        result = requestParamHandle[id](result)
      }catch(e) {
        // do nothing
      }
      const { params, api, urlParameterMap } = result;
      // 下钻处理
      const drillInfoList = relationData.drillInfo?.list || [];
      const name =  id+'_props';
      blockPropState[name].dataSets.loading = true;
      try {
        post(api, params).then(async (resp) => {
          // 外挂预处理响应结果
          try{
            resp = requestResponsePreHandle[id](resp)
          } catch(e) {
            // do nothing
          }
          if (componentKey === 'control_linkage') {
            blockPropState[name].dataSource = resp.data?.dataList|| [];
            // 外挂处理响应结果
            try{
              requestResponsePostHandle[id](resp)
            } catch(e) {
              // do nothing
            }
            return;
          }
          if (extendParams.dealData) {
            blockPropState[name].dataSets.source = extendParams.dealData({
              dataSource: resp.data?.dataList|| []
            });
          } else {
            blockPropState[name].dataSets.source = resp.data?.dataList|| [];
          }
          blockPropState[name].dataSets.loading = false;
          blockPropState[name].dataSets.authCode = resp.errorCode === 'table.no.permission' || resp.errorCode === 'dataset.no.permission';
          if (pageInfoMap[id]) {
             pageInfoMap[id].total = resp.data?.totalElements;
          }
          // 这里加判断，区分是下钻接口调用还是上钻接口调用,只有下钻才这么处理
          if (drillInfoList.length && drillBreadcrumbs.length) {
            let drillInfoListIndex = drillBreadcrumbs.length - 1;
            //世界地图下钻减一
            if(componentKey.includes('map') && !geoMap.includes('world')) {
              drillInfoListIndex = drillBreadcrumbs.length - 2;
            }
            blockPropState[name].dataSets.dimensions.xAxis = drillInfoList[drillInfoListIndex]?.alias || drillInfoList[drillInfoListIndex]?.name;
          }
          // 上钻时候更新dimensions.xAxis的值
          if (drillType && drillType === 'up' && drillInfoList.length) {
            const { item = undefined, index } = upParams;
            // 点击取消钻取的时候，默认取第一个,面包屑和drillInfoList是映射对应关系
            if (item) {
              let itemIndex = index;
              // 地图组件和其他Echart组件下钻信息不一样，需区分
              if(componentKey.includes('map') && !geoMap.includes('world')) {
                itemIndex = index - 1;
              }
              blockPropState[name].dataSets.dimensions.xAxis = drillInfoList[itemIndex]?.alias || drillInfoList[itemIndex]?.name || '';
              // 不存在的时候点击了取消钻取的动作，去drillInfoList去取，默认取第一项
            } else {
              if (drillInfoList.length > 0) {
                const [ { alias, name: drillName } ] = drillInfoList;
                blockPropState[name].dataSets.dimensions.xAxis = alias || drillName || '';
              }
            }
          }
          // 预览格式化数据之前需清空条件格式存储数据
          Object.keys(blockPropState[name].dataSets.conditionData).map((item) => {
            blockPropState[name].dataSets.conditionData[item] = [];
          })
          const requestIotLineParams = intervalMap[id] && intervalMap[id].monitorType ? {
            pageSize: intervalMap[id].pageSize,
            index: intervalMap[id].index,
            monitorType: intervalMap[id].monitorType
          } : null;
          const resultData = formatStrategy[id](blockPropState[name].dataSets, { requestIotLineParams, selectStackOptions: blockPropState[name].selectStackOptions, numberLabelConversionRate: blockPropState[name].numberLabelConversionRate,  forecastDays: blockPropState[name]?.forecastDays
            ? Number(blockPropState[name]?.forecastDays)
            : blockPropState[name]?.forecastDays });
          // 处理数据格式
          const rules = generateComponentFieldFormatMap({ relationData, props: blockPropState[name], componentKey });
          handleDealDataFormat({...resultData, dimensions: blockPropState[name]?.dataSets?.dimensions }, rules, componentKey);
          const { seriesData, xAxisData, indicatorData, formatData, columns, tableConditionSetMap, realDimensionData, yAxisData, max } = resultData;
          blockPropState[name].dataSets.seriesData = seriesData;
          if(componentKey === 'uview_treeSelect_page_mobile') {
            blockPropState[name].options = seriesData;
          }
          blockPropState[name].dataSets.xAxisData = xAxisData;
          // Y轴
          blockPropState[name].dataSets.yAxisData = yAxisData;
          // 雷达图
          blockPropState[name].dataSets.indicatorData = indicatorData;
          // 处理轮播表的数据
          blockPropState[name].dataSets.formatData = formatData;
          // 表格列
          blockPropState[name].dataSets.columns = columns;
          // 表格条件数据
          blockPropState[name].dataSets.tableConditionSetMap = tableConditionSetMap;
          // 表格维度数据
          blockPropState[name].dataSets.realDimensionData = realDimensionData;
          //气泡地图图例最大值
          blockPropState[name].dataSets.max = max;

          // 外挂处理响应结果
          try{
            requestResponsePostHandle[id](resp)
          } catch(e) {
            // do nothing
          }
        })
      } catch (error) {
        blockPropState[name].dataSets.loading = false;
        return error
      }
    }

       // ---------------------------- 数据连接器 ----------------------------
       // 1. 定义空值用来响应数据response
       // 2. 定义 页面中组件使用的接口方法



  formatStrategy.vid_sg4nh39hxx = (datasets) => {
      const { seriesData, xAxisData } = formatModule.baseBarOrLineFormat(datasets);
      return {
        seriesData,
        xAxisData,
        dimensions: datasets.dimensions,
      };
    }

      // ---------------------------- 组件事件处理方法 ----------------------------


      // 获取所有联动组件的id
  const blocksMapKeys = ["vid_sg4nh39hxx"]


      // ============================ 组件事件处理方法 ============================

    // 动态缩放和设置页面
    function scaleScreen() {
          const setElement = document.getElementById("visualizationPageRoot"); // 获取预览页面根目录
          const { clientWidth, clientHeight } = setElement.parentNode;
          const scaleHeightRatio = clientHeight / 400; // 高度比例
          const scaleWidthRatio = clientWidth / 1000; // 宽度比例
          let bodyStyle = {
            backgroundColor: "rgba(14,42,66,1)",
            backgroundRepeat: "repeat",
            backgroundSize: "auto",
            backgroundImage: "none"
        };
        
          // Object.assign(setElement.style, bodyStyle); // 设置页面样式
          Object.assign(pageStyle, bodyStyle); // 设置页面样式


    }

      // ============================ web3d 方法 =====================

      // ============================ iot文本历史复现 方法 =====================



      // ------------------------------------------------------ 初始化

      let pageStyle = reactive({})

    // ================================定制化逻辑========================================
</script>
<style scoped>
    .al-layout{
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    /*蒙层*/
    .preview-mask{
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 100%;
      background-color: rgba(0,0,0,.45);
    }
    .vid_sg4nh39hxx{
      width:400px;
      height:260px;
      z-index:0;
      position:relative;
      font-weight:400;
      font-style:normal;
      background:rgba(0,0,0,0);
      border-style:;
      border-color:rgba(0,0,0,0);
      cursor:default;
      position: absolute;
      left: 332px;
      top: 158px
  }
    /******高级样式设置*************************/
</style>